在大型專案裡，通常我們還會透過 webpack、將 JavaScript、CSS、圖片做模組化，藉著 webpack 的設定、統一管理檔案，讓開發更單純。

sw-precache-webpack-plugin 是什麼？

sw-precache-webpack-plugin 是一個 Webpack plugin，底層使用 sw-precache，可以透過的 sw-precache 設定、來生成 Service Worker 檔案。

針對 Service Work 和 sw-precache，若有不清楚的地方、可以參考之前分享的文章：

• Service Work 簡介
• sw-precache 簡介
• sw-precache 應用

sw-precache-webpack-plugin 如何安裝？

我們可以透過 npm 進行安裝：

npm install --save-dev sw-precache-webpack-plugin  

sw-precache-webpack-plugin 如何使用？

var path = require('path');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');


module.exports = {
  context: __dirname,

  entry: {
    main: path.resolve(__dirname, 'src/index'),
  },

  output: {
    path: path.resolve(__dirname, 'src/bundles/'),
    filename: '[name]-[hash].js',
  },

  plugins: [
    new SWPrecacheWebpackPlugin(
      {
        cacheId: 'my-project-name',
        filename: 'my-service-worker.js',
        maximumFileSizeToCacheInBytes: 4194304,
        runtimeCaching: [{
          handler: 'cacheFirst',
          urlPattern: /[.]mp3$/,
        }],
      }
    ),
  ]
}

sw-precache-webpack-plugin 的 Configuration 介紹

• cacheId [String]（非必填但應該要填）： 設定 cache 的 unique 名稱
• filename [String]（非必填）： 用來指定產出的檔案名稱，上方範例的檔名是 my-service-worker.js ，預設檔名為 service-worker.js
• filepath [String]（非必填）： 用來指定產出的檔案路徑和名稱，上方範例沒有設定 ，預設使用 webpack.output.path + options.filename，範例中設定 output 的路徑為 src/bundles/ ， 所以自動產生的 Service Worker 檔案會在 src/bundles/my-service-worker.js 裡。
• maximumFileSizeToCacheInBytes： 設定 Cache 的最大檔案限制、單位為byte，範例為 4194304 (4 MB)
• runtimeCaching： 用來處理 cache 的行為， runtimeCaching.urlPattern 和 runtimeCaching.handler 為必填
  • runtimeCaching.urlPattern: 用 Regular Expression 或 String 去指定 URL
  • runtimeCaching.handler: 設定 request 的處理方式
    • networkFirst： 先透過網路發送 request，如果成功取得 response 則儲存在 cache 裡，不然就回傳舊的 cache，取得基本的資料、提供頁面顯示。
    • cacheFirst: 先去判斷有沒有對應的 cache，如果有、就直接回傳舊的 cache，如果沒有、才透過網路發送 request，獲取資料。
    • fastest: 同時『透過網路發送 request』並『判斷是否有舊的 cache 可供存取』，看兩個哪一個先返回資源（若有舊的 cache 通常會優先回應），即使返回 cache，仍然會發送 request，確保更新 cache 檔案。
    • cacheOnly: 只會去存取 cache，如果沒有舊的 cache 可供存取，就會失敗，不會再發出 request。
    • networkOnly: 透過網路發送 request，如果 request 失敗，則代表請求失敗。

參考文件

• goldhand/sw-precache-webpack-plugin
• sw-precache使用指南

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝